<template>
  <home-layout
    class="home"
    :active-class.sync="activeClass"
  >
    <!-- 头部导航栏 -->
    <template #header>
      <home-nav-bar :class="activeClass" />
    </template>
    <!-- 轮播图 区域 -->
    <swipe
      :list="homeSwipes"
      :default-style="{ display: 'block', width: '100%', height: '205px', background: '#fff' }"
    />

    <!-- 功能选择 区域 -->
    <home-grid
      :list="homeGrids"
      style="height: 186px;"
    />

    <!-- 公告 区域 -->
    <home-advert
      class="mg-t10"
      :list="homeNotices"
    />

    <!-- 今日课表&代办事项 区域 -->
    <home-list class="mg-t10" />
  </home-layout>
</template>

<script>
// 页面布局组件
import HomeLayout from '@/views/layout/HomeLayout'
// 首页头部导航栏组件
import HomeNavBar from './components/HomeNavBar'
// 轮播图组件
import Swipe from '@/components/Swipe'
// 轮播宫格组件
import HomeGrid from '@/components/Grid/HomeGrid'
// 公告组件
import HomeAdvert from './components/HomeAdvert'
// 今日课表&代办事项 组件
import HomeList from './components/HomeList/index'

export default {
  name: 'Home',
  components: {
    HomeLayout,
    HomeNavBar,
    Swipe,
    HomeGrid,
    HomeAdvert,
    HomeList
  },
  data () {
    return {
      activeClass: '',
      homeSwipes: [ // 轮播图数据
        { title: 'img1', imgUrl: 'images/home/swiper_1.jpg' },
        { title: 'img2', imgUrl: 'images/home/swiper_2.jpg' },
        { title: 'img3', imgUrl: 'images/home/swiper_3.jpg' }
      ],
      homeGrids: [ // 轮播宫格数据
        { id: 1, path: '/course', title: '我的课程', imgUrl: 'images/home/grid_1.png' },
        { id: 2, path: '/CourseTable', title: '课表查询', imgUrl: 'images/home/grid_2.png' },
        { id: 3, path: '/aaa', title: '选课', imgUrl: 'images/home/grid_3.png' },
        { id: 4, path: '/course/overview', title: '课程查询', imgUrl: 'images/home/grid_4.png' },
        { id: 5, path: '/organization/classroom', title: '教室查询', imgUrl: 'images/home/grid_5.png' }
      ],
      homeNotices: [ // 公告栏数据
        {
          id: 1,
          path: '',
          title: '2022学年选课通知',
          subTitle: '选课将于4月17号上午10:00开放',
          imgUrl: 'images/home/advert_1.png'
        },
        {
          id: 2,
          path: '',
          title: '维护说明',
          subTitle: '系统将于2023-04-17 16:00开始维护,维护时长预计3h',
          imgUrl: 'images/home/advert_1.png'
        }
      ]
    }
  },
  created () {
  },
  beforeRouteEnter (to, from, next) {
    // 进入之前缓存本组件，解决第一次不缓存列表页的问题
    next((vm) => {
      vm.$store.commit('permission/SET_INCLUDELIST', ['Home'])
    })
  },
  beforeRouteLeave (to, from, next) {
    // 跳转到详情页时缓存当前列表页，反之不缓存
    if (to.path.indexOf('/search/house/index') > -1 || to.path.indexOf('/house/list') > -1) {
      this.$store.commit('permission/SET_INCLUDELIST', ['Home'])
    } else {
      this.$store.commit('permission/SET_INCLUDELIST', [])
      this.$destroy() // 销毁vue实例
    }
    next()
  },
  methods: {

  }
}
</script>

<style scoped lang="less">
.app-wrapper {
  /deep/ .main-container {
    margin-top: -@nav-bar-height;
  }
}
</style>
